<template>
  <q-layout view="lHh Lpr lFf">
    <!-- <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header> -->
    <!-- <app-header></app-header> -->
    <!-- <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label header class="text-grey-8">
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer> -->

    <!-- <q-page-container>
      <router-view />
    </q-page-container> -->
    <AppHeader :class="headCoverVisible ? 'hasbg' : 'nobg'" />
    <AppHeaderCover />
    <AppMain />
    <AppFooter />
    <LoginDialog />
    <Loading v-show="false" />
  </q-layout>
</template>

<script lang="ts">
import EssentialLink from 'components/EssentialLink.vue';
import AppHeader from './Components/header.vue';
import AppHeaderCover from './Components/headerCover.vue';
import AppMain from './Components/main.vue';
import AppFooter from './Components/footer.vue';
import LoginDialog from 'src/components/login/loginDialog.vue';
import Loading from './Components/loading.vue';
const linksData = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Discord Chat Channel',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Forum',
    caption: 'forum.quasar.dev',
    icon: 'record_voice_over',
    link: 'https://forum.quasar.dev'
  },
  {
    title: 'Twitter',
    caption: '@quasarframework',
    icon: 'rss_feed',
    link: 'https://twitter.quasar.dev'
  },
  {
    title: 'Facebook',
    caption: '@QuasarFramework',
    icon: 'public',
    link: 'https://facebook.quasar.dev'
  },
  {
    title: 'Quasar Awesome',
    caption: 'Community Quasar projects',
    icon: 'favorite',
    link: 'https://awesome.quasar.dev'
  }
];

import { Vue, Component } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import CommonMixin from 'src/mixin/common';

@Component({
  components: {
    EssentialLink,
    AppHeader,
    AppHeaderCover,
    AppMain,
    AppFooter,
    LoginDialog,
    Loading
  },
  mounted() {
    window.addEventListener('scroll', () => {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.$store.commit('global/SET_SCROLL_TOP', scrollTop);
    });
  }
})
export default class MainLayout extends mixins(CommonMixin) {
  leftDrawerOpen = false;
  essentialLinks = linksData;

  get headCoverVisible(): boolean {
    return this.$store.state.headerCover.value.visible && this.scrollTop < 60;
  }
}
</script>
